import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_axrjc/datasource/network/bean/LightTypeBean.dart';
import 'package:flutter_axrjc/datasource/network/bean/SelectOption.dart';
import 'package:flutter_axrjc/util/Util.dart';
import 'package:flutter_axrjc/widget/custom_selection.dart';
import 'package:flutter_axrjc/widget/custom_text_field.dart';
import 'package:flutter_axrjc/widget/dialog.dart';
import 'package:flutter_axrjc/widget/single_select_dialog/view.dart';
import 'package:get/get.dart';

import 'logic.dart';

class AddLightPage extends StatelessWidget {
  const AddLightPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<AddLightLogic>();
    final state = Get.find<AddLightLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffF3F6F9),
      appBar: AppBar(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        titleSpacing: -10,
        elevation: 0,
        centerTitle: true,
        title: const Text(
          "添加灯具",
          style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 10),
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              children: [
                Obx(() {
                  return GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: state.imgList.length,
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 5,
                            mainAxisSpacing: 5,
                            childAspectRatio: 1),
                    itemBuilder: (BuildContext context, int index) {
                      var bean = state.imgList[index];
                      if (bean == "add") {
                        return GestureDetector(
                          onTap: logic.addImg,
                          child: Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.grey.withAlpha(20),
                                      blurRadius: 5)
                                ],
                                borderRadius: BorderRadius.circular(5)),
                            child: const Icon(
                              Icons.add,
                              color: Colors.grey,
                            ),
                          ),
                        );
                      } else {
                        return Stack(
                          children: [
                            InkWell(
                              onTap: () {
                                showPicPreview([bean]);
                              },
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    boxShadow: [
                                      BoxShadow(
                                          color: Colors.grey.withAlpha(20),
                                          blurRadius: 5)
                                    ],
                                    borderRadius: BorderRadius.circular(5),
                                    image: DecorationImage(
                                        image: Image.file(File(bean)).image,
                                        fit: BoxFit.cover)),
                              ),
                            ),
                            Positioned(
                                top: 0,
                                right: 0,
                                child: GestureDetector(
                                  onTap: () {
                                    state.originImgList.remove(bean);
                                    logic.refreshImg();
                                  },
                                  child: const Padding(
                                    padding: EdgeInsets.all(8.0),
                                    child: Icon(
                                      Icons.close,
                                      color: Colors.white,
                                    ),
                                  ),
                                ))
                          ],
                        );
                      }
                    },
                  );
                }),
                const SizedBox(
                  height: 10,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text("灯具名称"),
                      const SizedBox(
                        width: 10,
                      ),
                      Expanded(
                        child: Obx(() {
                          return CustomTextField(
                            style: const TextStyle(fontSize: 14),
                            textAlign: TextAlign.end,
                            value: state.fixtureName.value,
                            onChanged: (t) {
                              state.fixtureName.value = t;
                            },
                            inputDecoration: const InputDecoration(
                                hintText: "灯具名称",
                                hintStyle:
                                    TextStyle(fontSize: 14, color: Colors.grey),
                                isCollapsed: true,
                                isDense: true,
                                border: InputBorder.none),
                          );
                        }),
                      ),
                      const Icon(
                        Icons.keyboard_arrow_right_sharp,
                        color: Colors.grey,
                      )
                    ],
                  ),
                ),
                const Divider(
                  thickness: 0.5,
                  height: 0.5,
                ),
                // Padding(
                //   padding: const EdgeInsets.symmetric(vertical: 10),
                //   child: Row(
                //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //     children: [
                //       const Text("亮度"),
                //       const SizedBox(
                //         width: 10,
                //       ),
                //       Expanded(
                //         child: Obx(() {
                //           return CustomTextField(
                //             style: const TextStyle(fontSize: 14),
                //             textAlign: TextAlign.end,
                //             value: state.lux.value,
                //             onChanged: (t) {
                //               state.lux.value = t;
                //             },
                //             inputDecoration: const InputDecoration(
                //                 hintText: "亮度",
                //                 hintStyle:
                //                     TextStyle(fontSize: 14, color: Colors.grey),
                //                 isCollapsed: true,
                //                 isDense: true,
                //                 border: InputBorder.none),
                //           );
                //         }),
                //       ),
                //       const Icon(
                //         Icons.keyboard_arrow_right_sharp,
                //         color: Colors.grey,
                //       )
                //     ],
                //   ),
                // ),
                // Padding(
                //   padding: const EdgeInsets.symmetric(vertical: 10),
                //   child: Row(
                //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //     children: [
                //       const Text("色温"),
                //       const SizedBox(
                //         width: 10,
                //       ),
                //       Expanded(
                //         child: Obx(() {
                //           return CustomTextField(
                //             style: const TextStyle(fontSize: 14),
                //             textAlign: TextAlign.end,
                //             value: state.colorTemperatureAdjustment.value,
                //             onChanged: (t) {
                //               state.colorTemperatureAdjustment.value = t;
                //             },
                //             inputDecoration: const InputDecoration(
                //                 hintText: "色温",
                //                 hintStyle:
                //                     TextStyle(fontSize: 14, color: Colors.grey),
                //                 isCollapsed: true,
                //                 isDense: true,
                //                 border: InputBorder.none),
                //           );
                //         }),
                //       ),
                //       const Icon(
                //         Icons.keyboard_arrow_right_sharp,
                //         color: Colors.grey,
                //       )
                //     ],
                //   ),
                // ),

                Obx(() {
                  return CustomSelection(
                    "灯具品牌",
                    value: state.fixtureBrand.value,
                    onPressed: () async {
                      SelectOption? res = await showSelectionDialog(state
                          .brandType
                          .map((element) => SelectOption(
                              "${element.lampBrandName}",
                              "${element.lampBrandCode}"))
                          .toList());
                      if (res != null) {
                        state.fixtureBrandCode.value = res.value;
                        state.fixtureBrand.value = res.label;
                        state.currentBrandTypes.clear();
                        state.currentBrandTypes.addAll(state.brandType
                                .firstWhereOrNull((element) =>
                                    element.lampBrandCode ==
                                    state.fixtureBrandCode.value)
                                ?.baseLampTypes ??
                            []);
                        if (state.currentBrandTypes.isNotEmpty) {
                          state.fixtureModelId.value =
                              state.currentBrandTypes.first.lampTypeId ?? '';
                          state.fixtureModelName.value =
                              state.currentBrandTypes.first.lampTypeName ?? '';
                        }
                      }
                    },
                  );
                }),
                // Padding(
                //   padding: const EdgeInsets.symmetric(vertical: 10),
                //   child: Row(
                //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //     children: [
                //       const Text("灯具品牌"),
                //       const SizedBox(
                //         width: 10,
                //       ),
                //       Expanded(
                //         child: Obx(() {
                //           return CustomTextField(
                //             style: const TextStyle(fontSize: 14),
                //             textAlign: TextAlign.end,
                //             value: state.fixtureBrand.value,
                //             onChanged: (t) {
                //               state.fixtureBrand.value = t;
                //             },
                //             inputDecoration: const InputDecoration(
                //                 hintText: "灯具品牌",
                //                 hintStyle:
                //                     TextStyle(fontSize: 14, color: Colors.grey),
                //                 isCollapsed: true,
                //                 isDense: true,
                //                 border: InputBorder.none),
                //           );
                //         }),
                //       ),
                //       const Icon(
                //         Icons.keyboard_arrow_right_sharp,
                //         color: Colors.grey,
                //       )
                //     ],
                //   ),
                // ),
                const Divider(
                  thickness: 0.5,
                  height: 0.5,
                ),
                Obx(() {
                  return CustomSelection(
                    "灯具型号",
                    value: state.fixtureModelName.value,
                    onPressed: () async {
                      SelectOption? res = await showSelectionDialog(state
                          .currentBrandTypes
                          .map((element) => SelectOption(
                              "${element.lampTypeName}",
                              "${element.lampTypeId}"))
                          .toList());
                      if (res != null) {
                        state.fixtureModelName.value = res.label;
                        state.fixtureModelId.value = res.value;
                      }
                    },
                  );
                }),
                // Padding(
                //   padding: const EdgeInsets.symmetric(vertical: 10),
                //   child: Row(
                //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //     children: [
                //       const Text("灯具型号"),
                //       const SizedBox(
                //         width: 10,
                //       ),
                //       Expanded(
                //         child: Obx(() {
                //           return CustomTextField(
                //             style: const TextStyle(fontSize: 14),
                //             textAlign: TextAlign.end,
                //             value: state.fixtureModel.value,
                //             onChanged: (t) {
                //               state.fixtureModel.value = t;
                //             },
                //             inputDecoration: const InputDecoration(
                //                 hintText: "灯具型号",
                //                 hintStyle:
                //                     TextStyle(fontSize: 14, color: Colors.grey),
                //                 isCollapsed: true,
                //                 isDense: true,
                //                 border: InputBorder.none),
                //           );
                //         }),
                //       ),
                //       const Icon(
                //         Icons.keyboard_arrow_right_sharp,
                //         color: Colors.grey,
                //       )
                //     ],
                //   ),
                // ),

                const Divider(
                  thickness: 0.5,
                  height: 0.5,
                ),
                Obx(() {
                  return PopupMenuButton<LightTypeBean>(
                      offset: const Offset(1, 0),
                      onSelected: (LightTypeBean v) {
                        state.fixtureType.value = v.codeValue ?? '';
                        state.fixtureTypeName.value = v.codeName ?? '';
                      },
                      itemBuilder: (BuildContext context) {
                        return List.generate(state.types.length, (index) {
                          var t = state.types[index];
                          return PopupMenuItem(
                            value: t,
                            child: Text("${t.codeName}"),
                          );
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            const Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Text(
                                  "灯具类型",
                                ),
                                Text(
                                  "*",
                                  style: TextStyle(color: Colors.red),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Text(
                                  state.fixtureTypeName.value.isEmpty == true
                                      ? "请选择灯具类型"
                                      : state.fixtureTypeName.value,
                                  style: TextStyle(
                                      color:
                                          state.fixtureTypeName.value.isEmpty ==
                                                  true
                                              ? Colors.grey.shade500
                                              : Colors.black,
                                      fontSize: 15),
                                ),
                                const Icon(
                                  Icons.keyboard_arrow_right_sharp,
                                  color: Colors.grey,
                                )
                              ],
                            ),
                          ],
                        ),
                      ));
                }),
                const Divider(
                  thickness: 0.5,
                  height: 0.5,
                ),
                Obx(() {
                  return CustomSelection(
                    "购买日期",
                    value: state.installDate.value,
                    onPressed: () {
                      showCustomDatePicker(onConfirm: (time, s) {
                        state.installDate.value = Util.date2String(time) ?? '';
                      });
                    },
                  );
                }),
                const Divider(
                  thickness: 0.5,
                  height: 0.5,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text("备注"),
                      const SizedBox(
                        width: 10,
                      ),
                      Expanded(
                        child: Obx(() {
                          return CustomTextField(
                            style: const TextStyle(fontSize: 14),
                            value: state.remark.value,
                            maxLines: 5,
                            onChanged: (t) {
                              state.remark.value = t;
                            },
                            inputDecoration: const InputDecoration(
                                hintText: "请输入备注信息",
                                hintStyle:
                                    TextStyle(fontSize: 14, color: Colors.grey),
                                isCollapsed: true,
                                isDense: true,
                                contentPadding: EdgeInsets.all(10),
                                border: InputBorder.none),
                          );
                        }),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: InkWell(
                    onTap: logic.addLight,
                    child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 12),
                        decoration: BoxDecoration(
                            color: const Color(0xffDCDCDC).withAlpha(102),
                            borderRadius: BorderRadius.circular(20)),
                        child: const Center(
                          child: Text(
                            "添加",
                            style:
                                TextStyle(color: Colors.orange, fontSize: 14),
                          ),
                        )),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
